<template>
  <div class="v-control v-input-container">
    <label v-text="label" v-if="label"></label>
    <!--    <el-input-number-->
    <!--        v-if="props.type === 'number'"-->
    <!--        :disabled="props.disabled"-->
    <!--        :placeholder="defaultPlaceholder"-->
    <!--        v-bind="data.bind"-->
    <!--        :max="props.max"-->
    <!--        :min="props.min"-->
    <!--        :controls="props.controls"-->
    <!--        :precision="props.precision"-->
    <!--        :controls-position="props.controlsPosition"-->
    <!--        v-model="inputValue"-->
    <!--        ref="inputNumber"></el-input-number>-->
    <el-input
        ref="input"
        v-bind="data.bind"
        :disabled="props.disabled"
        :clearable="props.clearable"
        :placeholder="defaultPlaceholder"
        v-model="inputValue"
        :type="props.type"
        :minlength="props.minlength"
        :maxlength="props.maxlength"
        :show-password="props.isShowPassword"
    ></el-input>
    <div class="counter" v-if="isShowCounter" v-text="counter"></div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, watch, ref, computed, reactive} from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  },
  placeholder: {
    type: String,
    default: ''
  },
  modelValue: {
    type: String || Number
  },
  type: {
    type: String,
    default: 'text'
  },
  maxlength: {
    type: Number,
    default: 50
  },
  minlength: {
    type: Number,
    default: 1
  },
  isShowCounter: {
    type: Boolean,
    default: false
  },
  isShowPassword: {
    type: Boolean,
    default: false
  },
  width: {
    type: Number,
    default: 240
  },

  //设置计数器允许的最大值
  max: {
    type: Number
  },
  //设置计数器允许的最小值
  min: {
    type: Number,
    default: 1
  },
  //是否使用控制按钮
  controls: {
    type: Boolean,
    default: true
  },
  //数值精度
  precision: {
    type: Number,
  },
  //控制按钮位置
  controlsPosition: {
    type: String,
    default: 'right'
  }
})

const data = reactive({
  bind: {}
})

const emits = defineEmits(['update:modelValue'])

const inputValue = ref(props.modelValue)

watch(
    () => props.modelValue,
    () => {
      inputValue.value = props.modelValue
    }
)
watch(
    () => inputValue.value,
    () => {
      emits('update:modelValue', inputValue.value)
    }
)

let defaultPlaceholder = ref(props.placeholder)

onMounted(() => {
  if (props.type === 'textarea') {
    data.bind = {
      type: 'textarea',
      resize: 'vertical',
      rows: 3,
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      style: {
        width: props.width + 'px'
      }
    }
  } else {
    data.bind = {
      type: props.type,
      style: {
        width: props.width + 'px'
      }
    }
  }
  if (props.placeholder === '' && props.label) {
    defaultPlaceholder.value = `请输入${props.label}`
  }
})

const counter = computed(() => {
  return `${(props.modelValue as any).length} / ${props.maxlength}`
})
</script>
<style scoped lang="scss">
.v-input-container {
  display: flex;
  margin-right: 15px;

  label {
    margin-right: 10px;
    font-size: $--el-font-size-base;
    vertical-align: middle;
  }

  .el-input {
    // width: 75%;
    // display: inline-block;
    :deep(.el-input__wrapper) {
      width: 100%;
    }
  }

  .counter {
    margin-left: 5px;
    width: 70px
  }
}
</style>
